import React, {useEffect, useState} from 'react';
import {Button, Modal, Table, Tree} from "antd";
import axios from "axios";
import {DeleteOutlined, UnorderedListOutlined, ExclamationCircleOutlined} from "@ant-design/icons";

const {confirm} = Modal

const RoleList = () => {
    const [dataSource,setdataSource] = useState([])
    const [rightList,setRightList] = useState([])
    const [currentRight,setCurrentRight] = useState([])
    const [currentId,setCurrentId] = useState(0)
    const [isModalVisible,setisModalVisible]=useState(false)

    const columns=[
        {
            title:'ID',
            dataIndex:'id',
            render:(id)=>{
                return <b>{id}</b>
            }
        },
        {
            title: '角色名称',
            dataIndex: 'roleName'
        },
        {
            title: '操作',
            render:(item)=>{
                return <div>
                    <Button shape='circle' type={"primary"} icon={<UnorderedListOutlined />} onClick={()=>{
                        setisModalVisible(true)
                        setCurrentRight(item.rights)
                        setCurrentId(item.id)
                    }} style={{marginRight:'5px'}}/>
                    <Button shape="circle" danger icon={<DeleteOutlined/>}
                            onClick={()=>{confirmDel(item)}}/>
                </div>
            }
        }
    ]

    useEffect(()=>{
        axios.get('/roles').then(res=>{
            setdataSource(res.data)
        })
    },[])

    useEffect(()=>{
        axios.get('/rights?_embed=children').then(res=>{
            setRightList(res.data)
        })
    },[])


    function confirmDel(item) {
        confirm({
            title: '确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                deleteMethod(item);
            },
            onCancel() {},
        });
    }

    const deleteMethod = (item) =>{
            setdataSource(dataSource.filter(data=>data.id!==item.id))
    }

    const handleOk=()=>{
        setisModalVisible(false)
        setdataSource(dataSource.map(item=>{
            if(item.id===currentId){
                return {
                    ...item,
                    rights:currentRight
                }
            }
            return item
        }))
    }

    const handleCancel=()=>{
        setisModalVisible(false)
    }

    const onCheck =(checkKeys)=>{
        setCurrentRight(checkKeys)
    }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns} rowKey={item=>item.id}/>
            <Modal title="更改权限" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} cancelText={'取消'} okText={'确定'}>
                <Tree
                    checkable
                    checkedKeys={currentRight}
                    treeData={rightList}
                    onCheck={onCheck}
                    checkStrictly={true}
                />
            </Modal>
        </div>
    );
};

export default RoleList;